<template>

	<div class="container">


		<div class="form">


			<div>云医院管理系统</div>
			<div class="formWrapper">

				<el-form :model="form">
					<el-form-item>
						<el-input v-model="form.username" class="input" prefix-icon="el-icon-user"
							placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input type="password" v-model="form.password" class="input" prefix-icon="el-icon-s-grid"
							placeholder="请输入密码"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" class="btn" @click="login">登录</el-button>
					</el-form-item>

				</el-form>
			</div>





		</div>

	</div>


</template>

<script>
import  axios from '@/utils/request'

	export default {
		name: 'Login',
		data() {
			return {
				form: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			login() {
				//将username:'', 	password:''  后端，  admin  123455
        //发起axios （xhr ajax）   --> http://localhost:8080/login
        // 返回的结果进行处理
        // 非200   alert
        //200


        axios.post("/login",  this.form  ).then(retRes=>{
                  console.log("res",res)
                  //res   --  axios 封装的对象
                  // const  retRes = res.data


                  if (retRes.code == 200) {
                    this.$message.success('登录成功');

                    // this.store.state.username
                    // const {data} = res; //ES6
                    const token = retRes.data;
                    //登录画面设置值，
                    this.$store.commit("setToken", token)

                    //跳转到首页
                    this.$router.replace({
                      path: '/'
                    }).catch(err => {console.log(err)})

                  } else {
                    //this.$message 安装完ElementUI 自动注册的
                    this.$message.error('用户名或者密码错误');
                  }
        })

			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: grey;
		display: flex;

		justify-content: center;
		align-items: center;

	}

	.form {
		padding-top: 20px;
		width: 400px;
		height: 300px;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		display: inline-block;
		/* margin: 0 auto; */

		/* margin-top: 200px; */

	}

	.formWrapper {
		margin-top: 50px;
	}

	.input {

		width: 350px;
		height: 30px;
	}

	.btn {
		width: 90%;
	}
</style>